<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品列表</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no, email=no" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="screen-orientation" content="portrait" />
		<meta name="x5-orientation" content="portrait">
		<meta name="full-screen" content="true" />
		<meta name="x5-fullscreen" content="true" />
		<meta name="360-fullscreen" content="true" />
		<link rel="stylesheet" href="css/base.css" />
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	</head>
	<style>
		html,body{
			background: #f5f5f5;
		}
		.header{
			width: 100%;	
			height: 50px;		
			line-height: 50px;		
			text-align: center;
			border-bottom: 1px solid #ccc;	
			position: relative;
			background: #fbfbfb;
		}
		.header .backicon{
			position: absolute;
			height: 50px;
			width: 50px;
			text-align: center;
			left: 0px;
			top: 0px;
			
		}
		.header .backicon span{
			display: inline-block;
			width: 26px;
			height: 26px;
			background: url(img/back.png) center no-repeat;
			margin: 14px 0 0 14px;
			background-size: contain;
		}
		.header h1{
			font-size: 20px;
		}
		.w100{
			width: 100%;
			background: #fff;
			margin-top: 10px;
			padding: 10px 0;
		}
		.list{
			width: 90%;
			margin: 0 auto;
		}
		.list .pic{
			width:14%;
			margin-right: 15px;
		}
		.list .pic img{
			width:100%;
		}
		.list .text{
			width: 70%;
		}
		.list .text p{
			line-height: 30px;
			font-size: 14px;
		}
		.list .text p:nth-of-type(2){
			color: #666;
			font-size: 12px;
		}
		.list .text p:nth-of-type(2) span{
			color: #f66d00;
			font-weight: bold;
		}
	</style>
	<body>
		<div class="header">
			<h1>商品列表</h1>
			<div class="backicon" onclick="javascript:history.back(-1);"><span></span></div>
		</div>
		<div class="w100">
			<div class="list clearfix">
				<div class="fl pic"><img src="img/img1.jpg" /></div> 
				<div class="text fl">
					<p>解忧杂货店（电子书）</p>
					<p><span>¥5.99</span> *1</p>
				</div>				
			</div>
		</div>
		<div class="w100">
			<div class="list clearfix">
				<div class="fl pic"><img src="img/img2.jpg" /></div> 
				<div class="text fl">
					<p>浮生六纪（电子书）</p>
					<p><span>¥5.99</span> *1</p>
				</div>				
			</div>
		</div>
		<div class="w100">
			<div class="list clearfix">
				<div class="fl pic"><img src="img/img3.jpg" /></div> 
				<div class="text fl">
					<p>月亮和六便士（电子书）</p>
					<p><span>¥2.99</span> *1</p>
				</div>				
			</div>
		</div>
		<div class="w100">
			<div class="list clearfix">
				<div class="fl pic"><img src="img/img4.jpg" /></div> 
				<div class="text fl">
					<p>能量场（电子书）</p>
					<p><span>¥9.00</span> *1</p>
				</div>				
			</div>
		</div>
		<div class="w100">
			<div class="list clearfix">
				<div class="fl pic"><img src="img/img5.jpg" /></div> 
				<div class="text fl">
					<p>三更雨（电子书）</p>
					<p><span>¥3.00</span> *1</p>
				</div>				
			</div>
		</div>
	</body>
</html>
